<template>
  <div>
    <p class="mobiereg">请输入常用的手机号:</p>
    <input type="text" placeholder="手机号码" class="tel" v-model="username">
    <br>
    <p :class="usernameclass" v-show="flag1">{{usernametip}}</p>
    <input type="text" placeholder="输入密码" class="pwd" v-model="userpwd">
    <p :class="userpwdclass" v-show="flag2">{{userpwdtip}}</p>
    <br>
    <input type="checkbox">
    <span class="reading">我已充分阅读,理解并接受隐私政策的全部内容</span>
    <p class="error" v-html="msg"></p>
    <div class="zhuce" @click="login">确认</div>
  </div>
</template>
<script>
import userinfosModel from "../../model/userinfosModel.js";
export default {
  data() {
    return {
      msg: "",
      flag1: false,
      flag2: false,
      username: "",
      usernametip: "请以常用的手机号注册",
      usernameclass: "error",
      usernamereg: /^1[3-9][0-9]{9}$/,

      userpwd: "",
      userpwdtip: "请输入以数字字母组成的6到10位的密码",
      userpwdclass: "error",
      userpwdreg: /^[a-z0-9]{6,10}$/i
    };
  },

  methods: {
    async login() {
      if (this.userpwdclass == "success" && this.usernameclass == "success") {
        let { data: list } = await userinfosModel.query({
          username: this.username
        });
        if (list.length) {
          //说明用户存在
          this.msg = "用户名存在";
        } else {
          let { data: list2 } = await userinfosModel.add({
            username: this.username,
            userpwd: this.userpwd
          });
          console.log(list2);
          if (list2.username) {
            console.log("跳转");
            this.$router.push("/mine/login");
          }
        }
      }
    }
  },
  watch: {
    username(value) {
      if (this.usernamereg.test(value)) {
        this.flag1 = false;
        this.usernameclass = "success";
      } else {
        this.flag1 = true;
      }
      this.msg = "";
    },
    userpwd(value) {
      if (this.userpwdreg.test(value)) {
        this.flag2 = false;
        this.userpwdclass = "success";
      } else {
        this.flag2 = true;
      }
    }
  }
};
</script>
<style scoped>
.mobiereg {
  font-size: 14px;
  font-weight: normal;
}
.tel,
.pwd {
  box-sizing: border-box;
  background: none;
  width: 100%;
  line-height: normal;
  font-size: 14px;
  border: 1px solid gray;
  outline: 0;
  height: 40px;
  padding: 5px 10px;
  margin: 20px 0;
}

.reading {
  display: inline-block;
  font-size: 12px;
  color: #000;
  margin-bottom: 40px;
}
.zhuce {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
  background-color: black;
}
.error {
  color: red;
}
</style>

